// CloudflareLanding.jsx
// نسخه آماده برای Cloudflare Pages با شماره و آی‌دی‌های شما

import React from 'react';

export default function CloudflareLanding() {
  return (
    <div className="min-h-screen bg-gradient-to-b from-sky-50 to-white text-slate-900">
      {/* NAV */}
      <nav className="max-w-7xl mx-auto px-6 py-6 flex items-center justify-between">
        <div className="flex items-center gap-3">
          <div className="w-10 h-10 rounded-lg bg-gradient-to-br from-indigo-600 to-sky-400 flex items-center justify-center text-white font-bold">CF</div>
          <div>
            <h1 className="text-lg font-semibold">D9 Cloudflare Studio</h1>
            <p className="text-xs text-slate-500">سایت سریع، امن و مقیاس‌پذیر روی Cloudflare</p>
          </div>
        </div>
      </nav>

      {/* HERO */}
      <header className="max-w-7xl mx-auto px-6 py-12 grid gap-8 lg:grid-cols-2 items-center">
        <div>
          <h2 className="text-4xl lg:text-5xl font-extrabold leading-tight">سایت شخصی D9</h2>
          <p className="mt-4 text-lg text-slate-600">تمام اطلاعات تماس و شبکه‌های اجتماعی در یک صفحه با تم حرفه‌ای.</p>
        </div>

        <div className="relative">
          <div className="rounded-2xl bg-gradient-to-br from-white via-sky-50 to-slate-50 p-6 shadow-lg">
            <div className="h-64 w-full rounded-lg bg-gradient-to-br from-indigo-700 via-sky-500 to-indigo-400 flex items-center justify-center text-white text-xl font-semibold">پیش‌نمایش سایت</div>
          </div>
        </div>
      </header>

      {/* CONTACT */}
      <section id="contact" className="max-w-3xl mx-auto px-6 py-12">
        <h3 className="text-2xl font-bold">تماس / اطلاعات</h3>
        <p className="text-slate-600 mt-2">در این بخش شمارهٔ تماس، آی‌دی تلگرام و اینستاگرام نمایش داده می‌شود. QR کد برای دسترسی سریع نیز اضافه شده است.</p>

        <div className="mt-6 bg-white rounded-2xl shadow p-6 flex flex-col sm:flex-row items-center gap-6">
          <div className="flex-1">
            <div className="text-sm text-slate-500">شماره تماس</div>
            <div className="mt-1 font-semibold text-lg">+989965494069</div>

            <div className="mt-4 text-sm text-slate-500">تلگرام</div>
            <div className="mt-1">@danile</div>

            <div className="mt-4 text-sm text-slate-500">اینستاگرام</div>
            <div className="mt-1">@danielhajy</div>

            <div className="mt-6 flex gap-3">
              <a href="tel:+989965494069" className="px-4 py-2 bg-sky-600 text-white rounded-md">تماس بگیر</a>
              <a href="https://t.me/danile" target="_blank" rel="noreferrer" className="px-4 py-2 border rounded-md">باز کردن تلگرام</a>
              <a href="https://instagram.com/danielhajy" target="_blank" rel="noreferrer" className="px-4 py-2 border rounded-md">باز کردن اینستاگرام</a>
            </div>
          </div>

          <div className="w-44 flex-shrink-0 text-center">
            <div className="text-xs text-slate-500">QR برای تماس سریع</div>
            <img id="site-qr" className="mt-2 mx-auto rounded-lg shadow" src={`https://api.qrserver.com/v1/create-qr-code/?size=220x220&data=tel:+989965494069`} alt="QR code" />
            <div className="mt-3 text-sm">
              <button id="download-qr" className="px-3 py-2 border rounded-md">دانلود QR</button>
            </div>
          </div>
        </div>

        <script dangerouslySetInnerHTML={{__html: `
          (function(){
            const img = document.getElementById('site-qr');
            const dl = document.getElementById('download-qr');
            dl.addEventListener('click', function(){
              const a = document.createElement('a');
              a.href = img.src;
              a.download = 'site-qr.png';
              document.body.appendChild(a);
              a.click();
              a.remove();
            });
          })();
        `}} />
      </section>

      <footer className="border-t py-6 mt-6">
        <div className="max-w-7xl mx-auto px-6 flex flex-col md:flex-row items-center justify-between gap-4">
          <div className="text-sm text-slate-600">© {new Date().getFullYear()} D9 Cloudflare Studio — طراحی شده برای شما</div>
          <div className="flex gap-4 text-sm">
            <a className="hover:underline">حریم خصوصی</a>
            <a className="hover:underline">شرایط استفاده</a>
          </div>
        </div>
      </footer>
    </div>
  );
}